<script setup>
import Copypage from '@/components/table/copypage.vue'
import { Document, DocumentAdd } from '@element-plus/icons-vue'
import { timeAgo, utcTime, math18 } from '@/utils/util'
import Methodpage from '@/components/table/methodpage.vue'
// import { ref, onMounted } from 'vue'

const props = defineProps({
    address: String,
    tokenList: Array
});

</script>


<template>
    <div class="table">
        <div>
            <el-table :data="tokenList" style="width: 100%">
                <el-table-column prop="hash" label="Txn Hash" min-width="200">
                    <template #default="scope">
                        <div class="t_hash t_hash_eye">
                            <el-popover trigger="click" placement="right">
                                <template #reference>
                                    <p>
                                        <img src="@/assets/img/eye.svg" alt="eye-open" />
                                    </p>
                                </template>
                                <h4>Additional Info</h4>
                            </el-popover>
                            <Copypage :id="scope.row.hash" :type="1" />
                        </div>
                    </template>
                </el-table-column>
                <Methodpage :scope="scope" />
                <el-table-column prop="ts" label="Age" min-width="120">
                    <template #default="scope">
                        <el-tooltip class="item" effect="dark" :hide-after="0" :content="utcTime(scope.row.ts)"
                            placement="top">
                            <span>{{ timeAgo(scope.row.ts) }}</span>
                        </el-tooltip>

                    </template>
                </el-table-column>
                <el-table-column prop="from" label="From" min-width="150">
                    <template #default="scope">
                        <Copypage :id="scope.row.from" :type="3" :contract="address"
                            :isblue="(address && address.toLowerCase()) == scope.row.from" />
                    </template>
                </el-table-column>
                <el-table-column prop="" label="" width="55">
                    <template #default="scope">
                        <div class="t_hash" style="width:35px">
                            <i v-if="scope.row.to === scope.row.from" class="i-address">Self</i>
                            <i v-if="(address && address.toLowerCase()) === scope.row.from && scope.row.to !== scope.row.from"
                                class="i-address i-out">OUT</i>
                            <i v-if="(address && address.toLowerCase()) === scope.row.to && scope.row.to !== scope.row.from"
                                class="i-address">IN</i>
                            <i v-if="(address && address.toLowerCase()) !== scope.row.from && (address && address.toLowerCase()) !== scope.row.to && scope.row.to !== scope.row.from"
                                class="txs_i">➔</i>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="to" label="To" width="200">
                    <template #default="scope">
                        <div class="t_hash t_hash_r">
                            <el-icon color="#999" size="12px">
                                <Document v-if="scope.row.action == 'Call'" />
                            </el-icon>
                            <span v-if="scope.row.action == 'Create'"><el-icon>
                                    <DocumentAdd />
                                </el-icon> Contract Creation</span>
                            <div v-else>
                                <Copypage :id="scope.row.to" :type="3" :contract="address"
                                    :isblue="(address && address.toLowerCase()) == scope.row.to" />
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="value" label="Value" min-width="140">
                    <template #default="scope">
                        <p class="small_p">{{ math18(scope.row.value, scope.row.decimals) }}</p>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="token" label="Token">
                    <template #default="scope">
                        <router-link :to="'/token/' + scope.row.contract + add">
                            <p>{{ scope.row.name }} ({{ scope.row.symbol }})</p>
                        </router-link>
                    </template>
                </el-table-column> -->
            </el-table>
        </div>
    </div>
</template>



<style lang="less" scoped></style>